<template>
    <div class="navList">
        <div class="nav_item"
        v-for="(item,index) in navList"
        :key="index"
        :class="currentIndex == index ? 'nav_light' : ''"
        @click="changeNav(index)"
        >{{item.title}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'navbar',
    props: [
        'navList'
    ],
    data() {
        return {
            currentIndex:0
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        changeNav(index,flag){
            console.log(index)
        this.currentIndex = index
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
@mainColor:#2f3640;
@itemecolor:#fbc531;
@navLightColor:#273c75;
@textColor:#fff;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.navList{
    
    margin: auto;
    // margin-left: 50%;
    // transform: translateX(-50%);
    line-height: 42px;
    .position_flex(center);
    .nav_item{
        cursor: pointer;
        color: @textColor;
        border-bottom: 2px solid transparent;
        margin: 0 50px;
    }
    .nav_light{
    color: @itemecolor;
    border-bottom: 2px solid @itemecolor;
    }
}
</style>
